<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  poster: {
    type: String,
    default: '',
  },
})
const videoRef = ref<HTMLVideoElement>()
const showControls = ref(false)
const isPlaying = ref(false)
const play = () => {
  videoRef.value?.play()
  showControls.value = true
  isPlaying.value = true
}
</script>
<template>
  <div class="video-player">
    <div class="play" @click="play" v-if="!isPlaying">
      <svg xmlns="http://www.w3.org/2000/svg" fill="white">
        <circle cx="50" cy="50" r="48" stroke="white" stroke-width="4" fill="none" />
        <path d="M 40 30 L 70 50 L 40 70 Z" />
      </svg>
    </div>
    <video ref="videoRef" :src="src" :poster="poster" :controls="showControls"></video>
  </div>
</template>
<style scoped>
.video-player,
video {
  width: 100%;
  height: 100%;
}
.video-player {
  position: relative;
}
.play {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 100;
}
</style>
